<template>
    <div class="app-container">
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
          <el-button
                  style="float:right;margin-right: 15px"
                  @click="handleResetSearch()"
                  size="small"
          >重置</el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
            <el-form-item label="所属门店:">
              <el-input v-model="listQuery.storeName" class="input-width" placeholder="所属店铺"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>设备管理超管端</span>
            <el-button size="mini" class="btn-add" @click="set()">设置</el-button>
        </el-card>
        <div class="table-container">
            <el-table
                    ref="deviceTable"
                    :data="list"
                    style="width: 100%;"
                    @selection-change="handleSelectionChange"
                    v-loading="listLoading"
                    border
                    :cell-style="cellStyle"
            >
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column label="编号" width="80" align="center">
                    <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column label="所属门店" width="200" align="center">
                    <template slot-scope="scope">{{scope.row.storeName}}</template>
                </el-table-column>
                <el-table-column label="房间名" width="200" align="center">
                    <template slot-scope="scope">{{scope.row.machineName}}</template>
                </el-table-column>
                <el-table-column label="设备代码" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.deviceCode}}</template>
                </el-table-column>
                <el-table-column label="在线状态" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.olStatus | statusFilter}}</template>
                </el-table-column>
                <el-table-column label="连接IP" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.serverIp}}</template>
                </el-table-column>
                <el-table-column label="连接端口" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.serverPort}}</template>
                </el-table-column>
                <el-table-column label="房间状态" width="120" align="center" >
                    <template slot-scope="scope">{{scope.row.statusName}}</template>
                </el-table-column>
                <el-table-column label="最近一次重启时间" width="200" align="center">
                    <template slot-scope="scope">{{scope.row.restartTime | formatTime}}</template>
                </el-table-column>
                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <!--            <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>-->
                        <el-button size="mini" type="text" @click="restartDevice(scope.$index, scope.row)">重启
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[100,200,300]"
                    :current-page.sync="listQuery.pageNum"
                    :total="total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
    import {adminlist, addTask} from "@/api/qsg/device";
    import {formatDate} from "@/utils/date";

    const defaultListQuery = {
        pageNum: 1,
        pageSize: 100
    };
    export default {
        name: "deviceList",
        data() {
            return {
                listQuery: Object.assign({}, defaultListQuery),
                list: null,
                total: null,
                listLoading: false,
                multipleSelection: [],
            };
        },
        created() {
            console.log(11111111)
            this.getList();
        },

        filters: {
            formatTime(time) {
                if (time == null || time === "") {
                    return "";
                }
                let date = new Date(time);
                return formatDate(date, "yyyy-MM-dd hh:mm:ss");
            },
            statusFilter(status) {
                if (status == 0) {
                    return '在线'
                } else {
                    return '离线'
                }
            }
        },
        methods: {
            //改变表格某一列或者某一个单元格文本颜色
            cellStyle({row, column, rowIndex, columnIndex}) {
                // 定义样式变量
                let cellStyle;
                switch (row.statusName) {
                    case '空闲中':
                        cellStyle = 'color:#70DB93';
                        break;
                    // 0代表金禁用
                    case '使用中':
                        cellStyle = 'color:red';
                        break;
                    default:
                        cellStyle = '';
                }

                //return cellStyle  // 返回最终处理过的样式 这样写就是让全部行被style修饰
                // 返回最终处理过的样式 只让账号状态这个属性的属性被style修饰
                if (column.label == '房间状态') {
                    return cellStyle
                }
            },
            handleSearchList() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            set() {
                let ids = '';
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    ids = ids + this.multipleSelection[i].id + ','
                }
                ids = ids.substring(0, ids.lastIndexOf(","))
                this.$router.push({
                    path: "/setdeviceadmin",
                    query: {ids: ids}
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            handleDelete(index, row) {
                this.$confirm("是否要删除该条记录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    deleteDevice(row.id).then(response => {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                            duration: 1000
                        });
                        this.getList();
                    });
                });
            },
            handleAdd() {
                this.$router.push({path: "/drivermanage/addDevice"});
            },
            restartDevice(index, row) {
                this.$confirm("确定重启该设备", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    addTask(row.id).then(
                        (response) => {
                            this.$message({
                                message: "已发送指令",
                                type: "success",
                                duration: 1000,
                            });
                            this.getList()
                        }
                    );
                });
            },
            handleUpdate(index, row) {
                this.$router.push({
                    path: "/setdeviceadmin",
                    query: {id: row.id}
                });
            },
            handleBind(index, row) {
                this.$router.push({
                    path: "/drivermanage/devicemeal",
                    query: {id: row.id}
                });
            },
            getList() {
                this.listLoading = true;
                adminlist(this.listQuery).then(response => {
                    this.listLoading = false;
                    this.list = response.data.records;
                    this.total = response.data.total;
                });
            }
        }
    };
</script>
<style scoped>
    .input-width {
        width: 203px;
    }
</style>


